<script setup lang="ts">
import { ref, toRefs, reactive, toRef, computed, watch } from "vue";
import { onShow, onHide, onLoad } from "@dcloudio/uni-app";
import _ from "lodash";
import assets from "@/utils/assets";
import pcaa from "@/utils/address/pcaa";
import provincesOpts from "@/utils/address/provinces";

let props = defineProps([
  "placeholder",
  "label",
  "province",
  "city",
  "district",
]);

let emit = defineEmits(["update:province", "update:city", "update:district"]);

let { placeholder, label } = toRefs(props);
let province = toRef(props, "province");
let city = toRef(props, "city");
let district = toRef(props, "district");

let handleFieldChange = (evt: any) => {
  let detail = _.get(evt, "detail");
  let column = _.get(detail, "column");
  let index = _.get(detail, "value");
  let arr = _.get(multiArray.value, `[${column}]`);
  let item = _.get(arr, `[${index}]`);
  if (column + "" === "0") {
    emit("update:province", _.get(item, "name", ""));
    emit("update:city", "");
    emit("update:district", "");
  }
  if (column + "" === "1") {
    emit("update:city", _.get(item, "name", ""));
    emit("update:district", "");
  }
  if (column + "" === "2") {
    emit("update:district", _.get(item, "name", ""));
  }
};

let getOpts = (optMap: any) => {
  let keys = _.keys(optMap);

  let arr = _.map(keys, (key) => {
    return {
      name: optMap[key],
      value: key,
    };
  });
  return [
    {
      name: "",
      value: "",
    },
    ...arr,
  ];
};

let provinceArr = getOpts(provincesOpts);

let getValue = (arr: any, name: any) => {
  return (
    _.find(arr, {
      name: name,
    }) || _.head(arr)
  );
};

let multiArray = computed(() => {
  let currProvince = getValue(provinceArr, province.value);
  let cityArr = getOpts(_.get(pcaa, `${_.get(currProvince, "value")}`) || []);
  let currCity = getValue(cityArr, city.value);
  let districtArr = getOpts(_.get(pcaa, `${_.get(currCity, "value")}`) || []);
  return [provinceArr, cityArr, districtArr];
});

let multiIndex = computed(() => {
  let currProvince = getValue(provinceArr, province.value);
  let currProvinceIndex = _.findIndex(provinceArr, {
    name: _.get(currProvince, "name"),
  });

  let cityArr = getOpts(_.get(pcaa, `${_.get(currProvince, "value")}`) || []);
  let currCity = getValue(cityArr, city.value);
  let currCityIndex = _.findIndex(cityArr, {
    name: _.get(currCity, "name"),
  });
  let districtArr = getOpts(_.get(pcaa, `${_.get(currCity, "value")}`) || []);
  let currDistrict = getValue(districtArr, district.value);

  let currDistrictIndex = _.findIndex(districtArr, {
    name: _.get(currDistrict, "name"),
  });
  return [currProvinceIndex, currCityIndex, currDistrictIndex];
});
</script>

<template>
  <div class="form-item">
    <span class="name">{{ label }}</span>
    <picker
      mode="multiSelector"
      @columnchange="handleFieldChange"
      :value="multiIndex"
      :range="multiArray"
      class="picker-box"
      range-key="name"
    >
      <div class="picker-content">
        <view class="picker-name" v-if="province"
          >{{ province }}{{ city }}{{ district }}</view
        >
        <view v-else class="picker-name-empty"> {{ placeholder }} </view>
        <img :src="assets.arrow_right" class="arrow_right" />
      </div>
    </picker>
  </div>
</template>

<style lang="less" scoped>
.form-item {
  padding: 0 34rpx;
  padding-right: 0rpx;
  height: 112rpx;
  border-bottom: 1rpx solid #ededed;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}
.form-item:last-child {
  border-bottom: none;
}
.name {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #333333;
  margin-right: 8rpx;
  white-space: nowrap;
}
.picker-box {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 30rpx;
  box-sizing: border-box;
}
.picker-content {
  min-width: 400rpx;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.picker-name {
  height: 80rpx;
  line-height: 80rpx;
  flex: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #333333;
  margin-right: 8rpx;
}
.picker-name-empty {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #999999;
  margin-right: 8rpx;
}
.arrow_right {
  width: 40rpx;
  height: 40rpx;
}
</style>
